<style lang='scss' scoped>
  .m-wrap{
    position: relative;
    height: 250px;
    display: flex;
    border-top: 1px solid rgba(200,200,200,1);
    margin-bottom: 2px;
  }

  .m-img-box{
    position: relative;
    width: 250px; height: 250px;
  &>.m-user-img{
      width: 100%; height: 100%;
    }
  &>.m-vip{
      position: absolute;
      width: 60px; height: 40px;
      background: #39B866;
      text-align: center;
      line-height: 40px;
      font-size: 22px;
      left: 0; bottom: 0;
      color: #fff;
    }
  &>.m-down{
      position: absolute;
      width: 60px; height: 40px;
      background: #FF523E;
      text-align: center;
      line-height: 40px;
      font-size: 22px;
      right: 0; bottom: 0;
      color: #fff;
    }
  }

  .m-right{
    flex: 1;text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .m-name{
    height: 48px;
    line-height: 48px;
    color: #303641;
    font-size:34px;
    margin-top: 20px;
  }

  .m-text-item{
    position: absolute;
    top: 140px;
    height:40px;
    font-size:28px;
    color:#303641;
    line-height:40px;
  }

  .m-text-item-2{
  @extend .m-text-item;
    top: 190px;
  }
</style>

<template>
  <div class="m-wrap">
    <div class="m-img-box" :style="{backgroundColor: info != null ? info.customcolor : 'white'}">
      <img :src="info.imgurl" class="m-user-img"  v-show="info.imgurl">
      <div class="m-vip" v-show="item.paytype == 'VIP'">VIP</div>
      <div class="m-down" v-show="item.state == '下架'">下架</div>
    </div>
    <div class="m-right">
      <div class="m-name">{{item.name}}</div>
      <p class="m-text-item">{{item.factoryname}}</p>
      <p class="m-text-item-2">{{item.factory}}</p>
    </div>
    <!--<img src="" class="m-bianji" @click="$emit('update')">-->
  </div>
</template>

<script>
  export default {
    data () {
      return {

      }
    },

    components: {},

    computed: {
      info () {
        try{
          let info =  JSON.parse(this.item.info)
          return info
        }catch (e){
          return {}
        }
      }
    },

    props: {
      item: {
        type: Object,
        default () {
          return {}
        }
      }
    },

    mounted () {

    },

    methods: {

    }
  }

</script>
